@import "./fragment/topicBlockList";
@import "./fragment/hotList";
@import "./fragment/labelList";
@import "./fragment/adModule";
.header_content{
  transform: none;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.article{
  background: #fff;
  padding: 20px;
  margin-bottom: 10px;
  .article-info{
    margin-bottom: 20px;
    .article-info-inline{
      display: inline-block;
      font-size: 14px;
      color: var(--font-color);
    }
    .span{
      color: #8e8b8b;
      padding-right: 10px;
      font-size: 13px;
    }
    .span-a{
      color: #333;
      padding-right: 10px;
      font-size: 13px;
      word-break: break-all;
    }
    .article-tag{
      text-decoration: none;
      padding: 3px 8px;
      border-radius: 3px;
      font-size: 13px;
      margin-right: 8px;
    }
    .article-tag-0{
      color: #38bc8e;
      border: 1px solid #0fe28c;
      &:hover{
        background: #38bc8e;
        color: #fff;
      }
    }
    .article-tag-1{
      color: #2596e8;
      border: 1px solid #2ca7e2;
      &:hover{
        background: #3189e8;
        color: #fff;
      }
    }
    .article-tag-2{
      color: #7f54e8;
      border: 1px solid #9f6ee2;
      &:hover{
        background: #7f54e8;
        color: #fff;
      }
    }
    .article-tag-3{
      color: #e87509;
      border: 1px solid #e28b13;
      &:hover{
        background: #e87509;
        color: #fff;
      }
    }
  }
  .article-content p{
    overflow: auto;
  }
  h2{
    margin-top: 0px;
  }
}
.content-add{
  padding: 10px;
}
img{
  max-width: 100%;
}

pre{
  background: var(--font-color);
  padding: 5px;
  color: #fff;
  overflow: auto;
  code{
    background: var(--font-color);
    color: #fff;
    overflow: auto;
  }
}

code{
  background: var(--font-color);
  color: #fff;
  overflow: auto;
}
.article-comment{
  border-top: 1px solid #eee;
  padding: 10px;
  background: #fff;
  .form-control{
    width: 100%;
    border: 1px solid #979393;
    border-radius: 6px;
    text-indent: 6px;
    font-size: 15px;
    &:focus{
      border: none;
      outline: none;
      border: 1px solid var(--main-color);
    }
  }
  .action-box{
    display: flex;
    padding: 15px 0px;
    .btn-save{
      margin-left: auto;
    }
    .btn-save-disabled{
      margin-left: auto;
      background: var(--font-color-gray);
      border: 1px solid var(--font-color-gray);
      cursor: auto;
    }
  }
  #article-comment-main{
    .article-comment-item{
      border-bottom: 1px solid #eee;
      padding-bottom: 6px;
      margin-bottom: 15px;
      .article-comment-head{
        padding: 5px 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        .header-warp{
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          align-items: center;
          .avatar{
            width: 24px;
            height: 24px;
            padding-right: 10px;
          }
          .author{
            font-size: 16px;
            font-weight: 500;
          }
        }
        .time{
          color: #938f8f;
        }
      }
      .article-comment-body{
        font-size: 14px;
        color: #524e4e;
        padding: 5px 10px;
      }
    }
  }
}

.tool-bar{
  position: fixed;
  z-index: 98;
  top: 216px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  left: calc((100vw - 1200px)/2 - 78px);
  .tool-bar-item{
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    .tool-bar-pic{
      background: #fff;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
    }
    >span{
      font-size: 14px;
      color: var(--font-color-desc);
    }
  }
}